<template>
  <div class="login">
    <van-nav-bar title="会员登录" left-arrow @click-left="onBackClick" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>

      <div class="form">
        <div class="form-item">
          <input
            v-model="form.phone"
            class="inp"
            maxlength="11"
            placeholder="请输入手机号码"
            type="text"
          />
        </div>
        <div class="form-item">
          <input
            v-model="form.captcha"
            class="inp"
            maxlength="5"
            placeholder="请输入图形验证码"
            type="text"
          />
          <img :src="captchaImg" @click="refreshCaptcha" alt="验证码" />
        </div>
        <div class="form-item">
          <input v-model="form.smsCode" class="inp" placeholder="请输入短信验证码" type="text" />
          <button @click="getSmsCode" :disabled="isGettingSms">
            {{ smsText }}
          </button>
        </div>
      </div>

      <div class="login-btn" @click="handleLogin">登录</div>
    </div>
  </div>
</template>

<script>
import { getCaptchaImage, getSmsCode, login } from "@/api/login";
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      form: {
        phone: "",
        captcha: "",
        smsCode: "",
        captchaId: "",
      },
      captchaImg: "",
      isGettingSms: false,
      smsCountdown: 60,
      smsTimer: null,
    };
  },
  computed: {
    ...mapGetters("user", ["userInfo", "isLogin"]),
    smsText() {
      if (this.isGettingSms) {
        return `${this.smsCountdown}秒后重新发送`;
      }
      return "获取验证码";
    },
  },
  created() {
    this.refreshCaptcha();
  },
  methods: {
    ...mapActions("user", ["updateUserInfo", "logout"]),

    onBackClick() {
      this.$router.go(-1);
    },
    async refreshCaptcha() {
      try {
        const res = await getCaptchaImage();
        this.captchaImg = res.data.captchaImg;
        this.form.captchaId = res.data.captchaId;
      } catch (error) {
        console.error("获取验证码失败:", error);
      }
    },
    async getSmsCode() {
      if (this.isGettingSms) return;

      if (!this.form.phone) {
        alert("请输入手机号");
        return;
      }
      if (!this.form.captcha) {
        alert("请输入图形验证码");
        return;
      }

      try {
        const res = await getSmsCode({
          phone: this.form.phone,
          captcha: this.form.captcha,
          captchaId: this.form.captchaId,
        });
        this.form.smsCode = res.data.smsKey;

        // 开始倒计时
        this.isGettingSms = true;
        this.smsCountdown = 60;
        this.smsTimer = setInterval(() => {
          if (this.smsCountdown > 0) {
            this.smsCountdown--;
          } else {
            this.isGettingSms = false;
            clearInterval(this.smsTimer);
          }
        }, 1000);
      } catch (error) {
        console.error("获取短信验证码失败:", error);
        alert(error.message || "获取短信验证码失败");
      }
    },
    async handleLogin() {
      if (!this.form.phone || !this.form.smsCode) {
        alert("请填写完整信息");
        return;
      }

      try {
        const res = await login(this.form);
        // 保存token
        localStorage.setItem("token", res.data.token);
        // 保存用户信息
        this.updateUserInfo(res.data.userInfo);
        // 获取重定向地址
        const redirect = this.$route.query.redirect || "/";
        // 跳转到重定向地址或首页
        this.$router.push(redirect);
      } catch (error) {
        console.error("登录失败:", error);
        alert(error.message || "登录失败");
      }
    },
  },
  beforeDestroy() {
    if (this.smsTimer) {
      clearInterval(this.smsTimer);
    }
  },
};
</script>

<style lang="less" scoped>
.login {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  padding: 20px 29px;
  display: flex;
  flex-direction: column;

  .title {
    margin-bottom: 20px;
    h3 {
      font-size: 26px;
      font-weight: normal;
      margin: 0;
    }
    p {
      margin: 0;
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form {
    flex: 1;
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px 0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
      padding: 0;
      margin: 0;
    }
    img {
      width: 94px;
      height: 31px;
      margin-left: 10px;
    }
    button {
      height: 31px;
      border: none;
      font-size: 13px;
      color: #cea26a;
      background-color: transparent;
      padding: 0 9px;
      white-space: nowrap;
      &:disabled {
        color: #999;
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 30px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #ecb53c, #ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 适配 iPhone SE 等小屏幕设备
@media screen and (max-height: 667px) {
  .container {
    padding: 15px 20px;

    .title {
      margin-bottom: 15px;
      h3 {
        font-size: 22px;
      }
      p {
        line-height: 30px;
        font-size: 13px;
      }
    }

    .form-item {
      margin-bottom: 10px;
      .inp {
        height: 28px;
        font-size: 13px;
      }
      img {
        height: 28px;
      }
      button {
        height: 28px;
        font-size: 12px;
      }
    }

    .login-btn {
      height: 38px;
      margin-top: 20px;
      margin-bottom: 15px;
      font-size: 14px;
    }
  }
}
</style>
